import { useDispatch, useSelector } from 'react-redux';
import { addPerson } from '../redux/personSlice';
import { useRef } from 'react';

export default function Person() {
  const nameNode = useRef();
  const ageNode = useRef();

  const persons = useSelector(state => state.person.value);
  const count  = useSelector(state => state.count.value);
  const dispatch = useDispatch();

  const add = () => {
    dispatch(
      addPerson({
        id: Date.now(),
        name: nameNode.current.value,
        age: ageNode.current.value,
      }),
    );
  };
  return (
    <div>
      <h2>Person组件，上方组件总和：{count}</h2>
      <input ref={nameNode} type="text" name="name" />
      <input ref={ageNode} type="number" name="age" />
      <button onClick={add}>添加</button>
      <div className="">
        <ul>
          {persons.map(p => {
            return (
              <li key={p.id}>
                {p.name}---{p.age}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
